import { Avatar } from "@nextui-org/react"
import Grade from "./grade"

export default function CommentList({ list }){
    return <div className="comment-list-container background-100 waterfall-flow-3 px-[66px] py-[40px]">
        {
            list.map((item, index) => {
                return <div className="comment-item background-200 flex flex-col mr-9 mb-[29px] px-[31px] py-[21px]" key={index}>
                    <div className="comment-user flex">
                        <Avatar isBordered radius="full" src={item.avatar}></Avatar>
                        <div className="grade-box flex justify-end flex-1">
                            <Grade disabled="true" defaultValue={item.starNum}></Grade>
                        </div>
                    </div>
                    <div className="comment-content flex py-[16px] flex-wrap text-[14px]">
                        <div className="nickname mb-[5px]">
                            昵称： {item.nickname}
                        </div>
                        <div className="use mb-[5px] flex justify-end">
                            已使用： {item.use} 次
                        </div>
                        <div className="vip_type">
                            会员类型： {item.vipType}
                        </div>
                    </div>
                    <div className="comment-container">
                        {item.comment}
                    </div>
                </div>
            })
        }
    </div>
}